import React from 'react';
import ReactDOM from 'react-dom';
import tero_nav from '../../static/tero/tero_nav.less';
import Navv from './nav.jsx';
import u from '../../common.js'
import $ from 'jquery'

class Nav extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            names: [],
            flag: true,
            index: 0,
            search: [{ src: "../../static/image/tou_fifty.png", title: '宋中继' }, { src: "../../static/image/tou_fifty.png", title: '王小筱' }, { src: "../../static/image/tou_fifty.png", title: '鲁达' }, { src: "../../static/image/tou_fifty.png", title: '宋中继' }, { src: "../../static/image/tou_fifty.png", title: '钱度' }, { src: "../../static/image/tou_fifty.png", title: '李四' },],
            base: [],
            block: 0,
            myname: '添加微信群',
            mynumber: 12,
            top: '-8px',
            people: [],
            chooseContent: [],
            choosePeople: [],
            nameContent: [],
            filter: [],
            source: '',
            isCollect: true,
        }
    }
    toggle(index) {
        this.setState({
            index: index
        })
    }
    search(e) {
        this.setState({
            chooseContent: this.state.base.filter((item) => {
                return item.userName.includes(e.target.value) ? item : false
            }),
            choosePeople: this.state.people.filter((item) => {
                return item.userName.includes(e.target.value) ? item : false
            }),
        })
    }
    blockContent(index, val) {
        if (val || val == '') {
            this.setState((prevState, props) => ({
                filter: this.state.names.filter((item) => {
                    return item.includes(val)
                })
            }))
        } else {
            this.getContet(this.state.nameContent[index].group_openId, index)
            this.setState((prevState, props) => ({
                source: this.state.nameContent[index].id,
            }))
        }
    }
    getContet(id, index) {
        let that = this;
        u.wxListContent({ groupOpenId: id }, data => {
            this.setState((prevState, props) => ({
                base: data.RecordList,
                chooseContent: data.RecordList,
            }))
            u.wxListPeople({ groupOpenId: id }, data => {
                this.setState((prevState, props) => ({
                    people: data.MemberList,
                    choosePeople: data.MemberList,
                }))
                u.wxList(data => {
                    that.setState((prevState, props) => ({
                        isCollect: data.groupList[index].isCollect
                    }))
                })
            })
        })
    }
    getName() { //所有微信号列表
        u.wxList(data => {
            let arr = []
            if(!data.groupList.length)return;
            data.groupList.forEach((item, index) => {
                arr.push(item.group_name)
            })

            this.setState((prevState, props) => ({
                names: arr,
                nameContent: data.groupList,
                filter: arr,
                source: data.groupList[0].id,
            }))

            this.getContet(data.groupList[0].group_openId, 0)
        })
    }
    componentWillMount() {
        this.getName()
    }
    setfollow(bool) { //设置关注
        u.collection({ isCollect: bool, id: this.state.source }, data => {

        })
    }

    render() {
        return (

            <div className='tero_father'>
                <Navv names={this.state.names} blockContent={this.blockContent.bind(this)} myname={this.state.myname} mynumber={this.state.mynumber} top={this.state.top} filter={this.state.filter} />
                <div className='nav_h'>
                    <div><img id='admin' src={require('../../static/image/ic.png')} alt="" /></div>
                </div>
                <div className='nav_b'>
                    <div className='nav_b_left_son_periphery' onClick={() => {
                        this.setfollow(this.state.isCollect ? 0 : 1)
                        this.setState((prevState, props) => ({
                            isCollect: this.state.isCollect ? 0 : 1
                        }))
                    }}>
                        <div className='span' style={{ backgroundColor: this.state.isCollect ? '#5286ff' : '#fff', color: this.state.isCollect ? '#fff' : '#5286ff' }}>{this.state.isCollect ? '已关注' : '重点关注'}</div>
                    </div>
                    <div className='nav_b_left'>
                        <div className='nav_b_left_content nav_b_left_content_active' >
                            {
                                this.state.chooseContent && this.state.chooseContent.map((item, index) => {
                                    return (<div className='nav_b_left_son' key={index}>
                                        <div className='nav_b_left_t'><img src={require('../../static/image/tou_one.png')} alt="" /></div>
                                        <p><span>{item.userName}</span><br /><span dangerouslySetInnerHTML={{__html:item.content}}></span><br /><span>{item.sendTime}</span></p>
                                    </div>)
                                })
                            }
                        </div>
                        {/* {
                        this.state.names.map((item,index)=>{
                            return( index == 0?<div className={this.state.block == index?'nav_b_left_content nav_b_left_content_active':'nav_b_left_content'} key={index}>
                            <div className='nav_b_left_son'>
                                <div className='nav_b_left_t'><img src={require('../../static/image/tou_one.png')} alt="" /></div>
                                <p><span>王小筱</span><br />随着美国政府贸易保护主义的不断加码，美国科技企业越来越多地提出如下疑问：如果没有中国庞大市场的支撑，美国科技企业能够继续维持其全球领先地位吗？如果不能，美国企业如何避免特朗普贸易保护主义对其深耕中国市场的负面冲击？美国政府贸易保护主义的美国政府贸易保护主义的美国政府贸易保护主义的美国政府贸易保护主义的不断加码，美国科技企业越来越多地提出如下疑问：如果没有中国庞大市场的支撑，美国科技企业能够继续维持其全球领先地位吗？如果不能，美国企业如何避免特朗普贸易保护主义对其深耕中国市场的负面冲击？</p>
                            </div>
                            <div className='nav_b_left_son'>
                                <div className='nav_b_left_t'><img src={require('../../static/image/tou_two.png')} alt="" /></div>
                                <p><span>宋中继</span><br />美国科技企业越来越多地提出如下疑问? <b>@王小筱</b></p>
                            </div>
                            <div className='nav_b_left_son'>
                                <div className='nav_b_left_t'><img src={require('../../static/image/tou_three.png')} alt="" /></div>
                                <p><span>鲁达</span><br />问如果没有中国庞大市场的支撑随着美国政府贸易保护主义的不断加码? <b>@王小筱</b></p>
                            </div>
                            <div className='nav_b_left_son'>
                                <div className='nav_b_left_t'><img src={require('../../static/image/tou_four.png')} alt="" /></div>
                                <p><span>李苗苗</span><br /><img src={require('../../static/image/tero_nav_one.png')} alt="" /></p>
                            </div>
                            <div className='nav_b_left_son'>
                                <div className='nav_b_left_t'><img src={require('../../static/image/tou_fifty.png')} alt="" /></div>
                                <p><span>宋中继</span><br /><b>保密项目 SHBFH-002-HGU？</b></p>
                            </div>
                            <div className='nav_b_left_son'>
                                <div className='nav_b_left_t'><img src={require('../../static/image/tou_one.png')} alt="" /></div>
                                <p><span>钱度</span><br />随着美国政府贸易保护主义的不断加码？<img src={require('../../static/image/tero_icon_2.png')} alt="" /><img src={require('../../static/image/tero_icon_1.png')} alt="" /></p>
                            </div>
                        </div>:<div className={this.state.block == index?'nav_b_left_content nav_b_left_content_active':'nav_b_left_content'} key={index}>{item}</div>  )
                          
                        })
                    } */}

                    </div>
                    <div className='nav_b_right'>
                        <div className='nav_b_right_son'>
                            <div className='nav_b_right_top'>
                                <p className='p_title'>群名</p>
                                <p className='p_content'>舆情信息小组</p>
                                <p className='p_title'>群公告</p>
                                <p className='p_content'>暂无群公告</p>
                                <div className='nav_b_right_input'><input type="text" placeholder='搜索群成员' onChange={(e) => { this.search(e) }} /></div>
                            </div>
                            <div className='nav_b_right_ul'>
                                <ul>
                                    {
                                        this.state.choosePeople && this.state.choosePeople.map((item, index) => {
                                            return (<li key={index}><img src={require('../../static/image/tou_one.png')} alt="" /><span>{item.userName}</span></li>)
                                        })
                                    }
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}




export default Nav